<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta content="telephone=no" name="format-detection"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/base.css"/>
    <link rel="stylesheet" type="text/css" href="../css/cbs.css"/>
</head>
<body style="background: #fff;">
<div class="report-detail" id="app">
    <div class="report-detail-hd flex flex-align">
        <img :src="brandSrc" alt=""/>
        <div class="txt">
            <h1><!--大众 CC-->{{detailInfoM.seriesName}}</h1>
            <p>VIN:{{detailInfo.b4Vincode}}</p>
            <p>查询时间：{{detailInfo.createDate}}</p>
        </div>
    </div>
    <ul class="tab-hd flex">
        <li class="flex1" v-bind:class="{on:tabIndex==1}"><a @click='tabIndex=1' href="#tab1"
                                                             tapmode>概述</a></li>
        <li class="flex1" v-bind:class="{on:tabIndex==2}"><a @click='tabIndex=2' href="#tab2"
                                                             tapmode>事故</a></li>
        <li class="flex1" v-bind:class="{on:tabIndex==3}"><a @click='tabIndex=3' href="#tab3"
                                                             tapmode>车况</a></li>
        <li class="flex1" v-bind:class="{on:tabIndex==4}"><a @click='tabIndex=4' href="#tab4"
                                                             tapmode>里程</a></li>
    </ul>
    <ul class="tab-hd-fixed flex">
        <li class="flex1" v-bind:class="{on:tabIndex==1}"><a @click='tabIndex=1' href="#tab1"
                                                             tapmode>概述</a></li>
        <li class="flex1" v-bind:class="{on:tabIndex==2}"><a @click='tabIndex=2' href="#tab2"
                                                             tapmode>事故</a></li>
        <li class="flex1" v-bind:class="{on:tabIndex==3}"><a @click='tabIndex=3' href="#tab3"
                                                             tapmode>车况</a></li>
        <li class="flex1" v-bind:class="{on:tabIndex==4}"><a @click='tabIndex=4' href="#tab4"
                                                             tapmode>里程</a></li>
    </ul>
    <div class="tab-bd">
        <div class="bd1 bd-list">
            <ul class="posi-r tab1">
                <div id="tab1" style="position:absolute;top:-42px;"></div>
                <li class="flex">
                    <p class="flex1 t-hide1">维修保养记录（普通报告）</p>
                    <span @click="openSingleMaintainReport(detailInfoM)" tapmode
                          class="flex1 c-03a9f4">{{detailInfoM.normalRepairRecords.length}}条<span
                            class="font-icon font-icon-right c-03a9f4"></span></span>
                </li>
                <!--<li onclick="vm.showNextDom(this)" tapmode class="flex">
                 <p class="flex1 t-hide1">部件更换</p>
                 <span class="flex1 c-03a9f4">9处<span class="font-icon font-icon-right c-03a9f4"></span></span>
                 </li>
                 <dl class="repair-replace clear hide">
                 <dd>前保险杆</dd>
                 <dd>前保险杆</dd>
                 <dd>前保险杆</dd>
                 </dl>
                 <li onclick="vm.showNextDom(this)" tapmode class="flex">
                 <p class="flex1 t-hide1">部件维修</p>
                 <span class="flex1 c-03a9f4">9处<span class="font-icon font-icon-right c-03a9f4"></span></span>
                 </li>
                 <dl class="repair-replace clear hide">
                 <dd>前保险杆</dd>
                 <dd>前保险杆</dd>
                 <dd>前保险杆</dd>
                 </dl>-->
                <li class="flex">
                    <p class="flex1 t-hide1">车身结构维修记录</p>
                    <span class="flex1 c-03a9f4"><a href="#tab2">{{detailInfoM.constructAnalyzeRepairRecords ? detailInfoM.constructAnalyzeRepairRecords.length : 0}}条<span
                            class="font-icon font-icon-right c-03a9f4"></span></a></span>
                </li>
                <li class="flex">
                    <p class="flex1 t-hide1">重要组成部件维修记录</p>
                    <span class="flex1 c-03a9f4"><a href="#tab3">{{detailInfoM.componentAnalyzeRepairRecords ? detailInfoM.componentAnalyzeRepairRecords.length : 0}}条<span
                            class="font-icon font-icon-right c-03a9f4"></span></a></span>
                </li>
                <li class="flex">
                    <p class="flex1 t-hide1">外观覆盖件维修记录</p>
                    <span class="flex1 c-03a9f4"><a href="#tab3-2">{{detailInfoM.outsideAnalyzeRepairRecords ? detailInfoM.outsideAnalyzeRepairRecords.length : 0}}条<span
                            class="font-icon font-icon-right c-03a9f4"></span></a></span>
                </li>
                <li class="flex">
                    <p class="flex1 t-hide1">是否有火烧维修记录</p>
                    <span class="flex1">{{detailInfoM.carFireFlag==1 ? '有' : '无'}}</span>
                </li>
                <li class="flex">
                    <p class="flex1 t-hide1">是否有泡水维修记录</p>
                    <span class="flex1">{{detailInfoM.carWaterFlag==1 ? '有' : '无'}}</span>
                </li>
                <li class="flex">
                    <p class="flex1 t-hide1">里程表记录</p>
                    <span class="flex1">{{detailInfoM.mileageIsNormalFlag==1 ? '正常' : '不正常'}}</span>
                </li>
                <li class="flex">
                    <p class="flex1 t-hide1">最后公里数</p>
                    <span class="flex1">{{detailInfoM.normalRepairRecords[detailInfoM.normalRepairRecords.length-1].mileage}}公里</span>
                </li>
                <li class="flex">
                    <p class="flex1 t-hide1">预估至今公里数</p>
                    <span class="flex1">{{detailInfoM.mileageEstimate}}公里</span>
                </li>
                <li class="flex">
                    <p class="flex1 t-hide1">最后保养时间</p>
                    <span class="flex1">{{detailInfoM.lastMainTainTime}}</span>
                </li>
                <li class="flex">
                    <p class="flex1 t-hide1">最后维修时间</p>
                    <span class="flex1">{{detailInfoM.lastRepairTime}}</span>
                </li>
                <li class="flex">
                    <p class="flex1 t-hide1">平均保养次数</p>
                    <span class="flex1">{{detailInfoM.mainTainTimes}}</span>
                </li>
            </ul>
        </div>
        <div class="bd2 bd-list tab2">
            <div class="bd-list-tit posi-r">
                <div id="tab2" style="position:absolute;top:-42px;"></div>
                <p><span>事故分析</span>-结构件</p>
                <div>维修记录<span>{{detailInfoM.constructAnalyzeRepairRecords ? detailInfoM.constructAnalyzeRepairRecords.length : 0}}条</span>
                </div>
            </div>
            <ul>
                <li v-for="item in detailInfoM.constructAnalyzeRepairRecords">
                    <div class="list-con-tit">
                        <p class="fl">时间</p>
                        <span class="date fl">{{item.date}}</span>
                        <span class="mileage fr">{{item.mileage}}公里</span>
                    </div>
                    <div class="list-con">
                        <div class="flex txt-w">
                            <p class="shrink">项目</p>
                            <span class="flex1">{{item.type}}</span>
                        </div>
                        <div class="flex txt-w">
                            <p class="shrink">材料</p>
                            <span class="flex1">{{item.materal}}</span>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="null-record" v-show="!detailInfoM.constructAnalyzeRepairRecords">无维修记录记录
            </div>

            <div class="bd3 bd-list tab3">
                <div class="bd-list-tit posi-r">
                    <div id="tab3" style="position:absolute;top:-42px;"></div>
                    <p><span>车况分析</span>-重要部件</p>
                    <div>维修记录<span>{{detailInfoM.componentAnalyzeRepairRecords ? detailInfoM.componentAnalyzeRepairRecords.length : 0}}条</span>
                    </div>
                </div>
                <ul>
                    <li v-for="item in detailInfoM.componentAnalyzeRepairRecords">
                        <div class="list-con-tit">
                            <p class="fl">时间</p>
                            <span class="date fl">{{item.date}}</span>
                            <span class="mileage fr">{{item.mileage}}公里</span>
                        </div>
                        <div class="list-con">
                            <div class="flex txt-w">
                                <p class="shrink">项目</p>
                                <span class="flex1">{{item.type}}</span>
                            </div>
                            <div class="flex txt-w">
                                <p class="shrink">材料</p>
                                <span class="flex1">{{item.materal}}</span>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="null-record" v-show="!detailInfoM.componentAnalyzeRepairRecords">
                    无维修记录记录
                </div>


                <div class="bd-list-tit posi-r">
                    <div id="tab3-2" style="position:absolute;top:-42px;"></div>
                    <p><span>车况分析</span>-覆盖件</p>
                    <div>维修记录<span>{{detailInfoM.outsideAnalyzeRepairRecords ? detailInfoM.outsideAnalyzeRepairRecords.length : 0}}条</span>
                    </div>
                </div>
                <ul>
                    <li v-for="item in detailInfoM.outsideAnalyzeRepairRecords">
                        <div class="list-con-tit">
                            <p class="fl">时间</p>
                            <span class="date fl">{{item.date}}</span>
                            <span class="mileage fr">{{item.mileage}}公里</span>
                        </div>
                        <div class="list-con">
                            <div class="flex txt-w">
                                <p class="shrink">项目</p>
                                <span class="flex1">{{item.type}}</span>
                            </div>
                            <div class="flex txt-w">
                                <p class="shrink">材料</p>
                                <span class="flex1">{{item.materal}}</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="null-record" v-show="!detailInfoM.outsideAnalyzeRepairRecords">无维修记录记录</div>
        </div>
        <div class="bd4 bd-list tab4">
            <div class="bd-list-tit posi-r">
                <div id="tab4" style="position:absolute;top:-42px;"></div>
                <p><span>里程分析</span></p>
                <div v-if="LCFX"><span>有异常</span></div>
                <div v-else>无异常</div>
            </div>
            <div v-if="detailInfoM.normalRepairRecords.length>0">
                <ul class="list-hd list flex">
                    <li class="flex1">进场时间</li>
                    <li class="flex1">公里数</li>
                    <li class="flex1">是否异常</li>
                </ul>
                <ul v-for="item in 1" class="list flex">
                    <li class="flex1">{{detailInfoM.normalRepairRecords[0].date}}</li>
                    <li class="flex1">{{detailInfoM.normalRepairRecords[0].mileage}}公里</li>
                    <li class="flex1">首次进场</li>
                </ul>
                <ul class="list flex">
                    <li class="flex1 flex-center flex-align flex-wrap"><img height="30px"
                                                                            src="../image/ellipsis.png"
                                                                            alt=""/></li>
                    <li class="flex1 flex-center flex-align flex-wrap"><img height="30px"
                                                                            src="../image/ellipsis.png"
                                                                            alt=""/></li>
                    <li class="flex1 flex-center flex-align flex-wrap"><img height="30px"
                                                                            src="../image/ellipsis.png"
                                                                            alt=""/></li>
                </ul>

                <ul v-show="item.mileage < detailInfoM.normalRepairRecords[$index].mileage"
                    v-for="item in newNormalRepairRecords" class="list flex">
                    <li class="flex1">2011-10-17</li>
                    <li class="flex1">{{item.mileage}}公里</li>
                    <li class="flex1 c-03a9f4">异常数据 {{LCFXFN(item.mileage <
                        detailInfoM.normalRepairRecords[$index].mileage)}}
                    </li>
                </ul>

                <ul class=" list flex">
                    <li class="flex1 flex-center flex-align flex-wrap"><img height="30px"
                                                                            src="../image/ellipsis.png"
                                                                            alt=""/></li>
                    <li class="flex1 flex-center flex-align flex-wrap"><img height="30px"
                                                                            src="../image/ellipsis.png"
                                                                            alt=""/></li>
                    <li class="flex1 flex-center flex-align flex-wrap"><img height="30px"
                                                                            src="../image/ellipsis.png"
                                                                            alt=""/></li>
                </ul>
                <ul v-for="item in 1" class="list flex">
                    <li class="flex1">
                        {{detailInfoM.normalRepairRecords[detailInfoM.normalRepairRecords.length-1].date}}
                    </li>
                    <li class="flex1">
                        {{detailInfoM.normalRepairRecords[detailInfoM.normalRepairRecords.length-1].mileage}}公里
                    </li>
                    <li class="flex1">
                        {{detailInfoM.normalRepairRecords[detailInfoM.normalRepairRecords.length-1].mileage
                        <
                        detailInfoM.normalRepairRecords[detailInfoM.normalRepairRecords.length-2].mileage
                        ? '数据异常' : '末次进场'}}
                    </li>
                </ul>
            </div>
            <div class="null-record" v-else>无维修记录记录</div>

            <dl>
                <dd class="flex flex-between">
                    <p>查博士预估公里数</p>
                    <span>{{detailInfoM.mileageEstimate}}公里</span>
                </dd>
                <dd class="flex flex-between">
                    <p>年平均行驶里程</p>
                    <span>{{detailInfoM.mileageEveryYear}}公里</span>
                </dd>
            </dl>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript" src="../js/key.js"></script>
<script type="text/javascript" src="../js/zepto-min.js"></script>
<script type="text/javascript" src="../js/api.js"></script>
<script type="text/javascript">
    reportBridge.sendMethod();
        function getDetail(data){
            vm.getDetail(data);
            vm.scrollMove();
        };
        var vm=new Vue({
                       el:'#app',
                       data:{
                       tabIndex:1,
                       id:'',
                       detailInfo:'',
                       detailInfoM:'',
                       newNormalRepairRecords:[],//用来做里程分析中间数据
                       LCFX:false,
                       brandSrc:'',
                       },
                       methods:{
                       convertPinyin:function(l1){ 
                       var l2 = l1.length;  
                       var I1 = "";  
                       var reg = new RegExp('[a-zA-Z0-9\- ]');  
                       for (var i = 0; i < l2; i++) {  
                       var val = l1.substr(i, 1);  
                       var name = arraySearch(val, PinYin);  
                       if (reg.test(val)) {  
                       I1 += val;  
                       } else if (name !== false) {  
                       I1 += name;  
                       }  
                       
                       }  
                       I1 = I1.replace(/ /g, '-');  
                       while (I1.indexOf('--') > 0) {  
                       I1 = I1.replace('--', '-');  
                       }  
                       return I1;  
                       },
                       carIcon:function(){
                       if(vm.detailInfoM.Code==1104){
                       var val=vm.convertPinyin(vm.detailInfoM.brand);
                       vm.brandSrc ='../image/logo/'+ val.toLocaleLowerCase().replace(/[^a-zA-Z]/g, "")+'.png';
                       }else{
                       vm.brandSrc =  '../lazyload-err2.png';
                       };
                       },
                       scrollMove:function(){
                       var hdHeight=$('.report-detail-hd').height()
                       $(window).on('touchmove',function(){
                                    if($(window).scrollTop()>=hdHeight){
                                    $('.tab-hd-fixed').addClass('on');
                                    }
                                    else{
                                    $('.tab-hd-fixed').removeClass('on');
                                    };
                                    });
                       $(window).scroll(function(){
                                        setTimeout(function(){
                                                   if($(window).scrollTop()>=hdHeight){
                                                   $('.tab-hd-fixed').addClass('on');
                                                   }
                                                   else{
                                                   $('.tab-hd-fixed').removeClass('on');
                                                   };
                                                   },1);
                                        if($(window).scrollTop()>=0 && $(window).scrollTop()<$('.tab2').offset().top-$('.tab-hd-fixed').height()){
                                        setTimeout(function(){
                                                   vm.tabIndex=1;
                                                   },1)
                                        }
                                        if($(window).scrollTop()>=$('.tab2').offset().top-$('.tab-hd-fixed').height() && $(window).scrollTop()<$('.tab3').offset().top-$('.tab-hd-fixed').height()){
                                        setTimeout(function(){
                                                   vm.tabIndex=2;
                                                   },1)
                                        }
                                        if($(window).scrollTop()>=$('.tab3').offset().top-$('.tab-hd-fixed').height() && $(window).scrollTop()<$('.tab4').offset().top-$('.tab-hd-fixed').height()){
                                        setTimeout(function(){
                                                   vm.tabIndex=3;
                                                   },1)
                                        }
                                        if($(window).scrollTop()>=$('.tab4').offset().top-$('.tab-hd-fixed').height() || $(window).scrollTop()>=$(document).height() - $(window).height()){
                                        setTimeout(function(){
                                                   vm.tabIndex=4;
                                                   },1)
                                        }
                                        })
                       },
                       LCFXFN:function(status){
                       status ? vm.LCFX=true : '';
                       },
                       showNextDom:function(dom){
                       if($(dom).find('.font-icon').hasClass('font-icon-right')){
                       $(dom).find('.font-icon').removeClass('font-icon-right');
                       $(dom).find('.font-icon').addClass('font-icon-down');
                       $(dom).next().stop(true,true).slideDown();
                       }else{
                       $(dom).find('.font-icon').addClass('font-icon-right');
                       $(dom).find('.font-icon').removeClass('font-icon-down');
                       $(dom).next().stop(true,true).slideUp();
                       };
                       },
                       getDetail:function(ret){
                        vm.detailInfo=ret.buy4s;
                                            vm.detailInfoM=JSON.parse(ret.buy4s.b4Result);
                                            if(vm.detailInfoM.normalRepairRecords.length>2){
                                            for(var i=0;i<vm.detailInfoM.normalRepairRecords.length;i++){
                                            vm.newNormalRepairRecords.push(vm.detailInfoM.normalRepairRecords[i]);
                                            };
                                            vm.newNormalRepairRecords.splice(0,1)
                                            vm.newNormalRepairRecords.splice(vm.newNormalRepairRecords.length-1,1);
                                            };
                                            vm.carIcon();
                                           return false;

                       var url=httpurl1+"chaboshi/getReport";
                       var data={
                       payListId:vm.id
                       };
                       $api.ajax(url,data,function(ret){
                                 setTimeout(function(){
                                            if(ret.success=='00'){
                                            vm.detailInfo=ret.buy4s;
                                            vm.detailInfoM=JSON.parse(ret.buy4s.b4Result);
                                            if(vm.detailInfoM.normalRepairRecords.length>2){
                                            for(var i=0;i<vm.detailInfoM.normalRepairRecords.length;i++){
                                            vm.newNormalRepairRecords.push(vm.detailInfoM.normalRepairRecords[i]);
                                            };
                                            vm.newNormalRepairRecords.splice(0,1)
                                            vm.newNormalRepairRecords.splice(vm.newNormalRepairRecords.length-1,1);
                                            };
                                            vm.carIcon();
                                            }else{
                                            alert('获取数据失败，请稍后再试')
                                            }
                                            }, 1);
                                 
                                 })
                       },
                       openSingleMaintainReport:function(detailInfoM) {
                           detailInfoM.normalRepairRecords[0].brandSrc=vm.brandSrc;
                           detailInfoM.normalRepairRecords[0].brand=vm.detailInfoM.seriesName;
                           detailInfoM.normalRepairRecords[0].vin=vm.detailInfo.b4Vincode;
                           detailInfoM.normalRepairRecords[0].date2=vm.detailInfo.createDate;


                           if (detailInfoM.normalRepairRecords.length > 0) {
                                reportBridge.goDivideFeild(JSON.stringify(detailInfoM.normalRepairRecords));
                           }
                       },


                       openWin:function(winTit,winName,winUrl,fName,fUrl,param){
                       if(param){
                       param[0].brandSrc=vm.brandSrc;
                       param[0].brand=vm.detailInfoM.seriesName;
                       param[0].vin=vm.detailInfo.b4Vincode;
                       param[0].date2=vm.detailInfo.createDate;
                       };
                       $api.openWin({
                                    winTit:winTit,
                                    winName:winName,
                                    winUrl:winUrl,
                                    send:{
                                    frame:{
                                    fName:fName,
                                    fUrl:fUrl,
                                    },
                                    param:{
                                    param:param
                                    }
                                    }
                                    });
                       },
                       }
                       })






</script>
</html>
